<template>
	<div>
		<div class="mainCon">
			<div class="containercontent">
				<div class="selectw100 seachTip" v-if="!notop">
					<div class="inlineblock verticalmiddle infoitem" v-if="!isZuJian&&!noadd">
						<div class="inlineblock verticalmiddle">
							名称
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-input style="" v-model="searchName" size="mini" placeholder="检测项目名称" @keyup.enter.native="readItemList(readQuery,'search')" clearable></el-input>
						</div>
					</div>
					<div class="inlineblock verticalmiddle infoitem" v-if="!isZuJian&&!noadd">
						<div class="inlineblock verticalmiddle">
							状态
						</div>
						<div class="inlineblock verticalmiddle informationItem">
							<el-select size="mini" v-model="enableStatusValue" @change="readItemList(readQuery,'search')" clearable>
								<el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="inlineblock verticalmiddle" v-if="noadd">
						<div class="inlineblock verticalmiddle">
							名称
							<div class="inlineblock verticalmiddle" style="width:calc(100% - 80px);">
								<el-input v-model="searchName" size="mini" placeholder="检测项目名称" @keyup.enter.native="readItemList(readQuery)"></el-input>
							</div>
						</div>
					</div>
					<div class="inlineblock verticalmiddle" v-if="isZuJian">
						<div class="inlineblock verticalmiddle">
							名称
							<div class="inlineblock verticalmiddle isZuJian">

								<el-input v-model="searchName" size="mini" @keyup.enter.native="readItemList"></el-input>
							</div>
						</div>
					</div>

					<div class="inlineblock basicRightDistanceA searchIcon" v-if="isZuJian">
						<el-button size="mini" icon="el-icon-search" @click="readItemList(readQuery)"></el-button>
					</div>
					<div class="inlineblock basicRightDistanceA searchIcon" v-if="!isZuJian&&!noadd">
						<!--<el-button type="primary" size="mini" @click="empty">清空</el-button>-->
						<el-button size="mini" @click="readItemList(readQuery,'search')">搜索</el-button>
						<el-button size="mini" @click="emptyList" style="color:#fff">清空</el-button>
					</div>
				</div>
				<div class="separaterowTable" style="width:100%;">
					<div class="tableTittle" v-if="!isZuJian">
						<div><span class="fontImpact">1</span><span>检测项目</span></div>

						<el-button type="primary" icon="el-icon-plus" size="mini" @click="addAnalysisitem" v-if="!isZuJian&&!noadd && userOpernation.add.display"
						 style="float:right">添加项目</el-button>
             <el-button type="primary" icon="el-icon-plus" size="mini" @click="chooseAnalysisitem" v-if="!isZuJian&&!noadd && userOpernation.init.display"
              style="float:right;margin-right:8px;">选择</el-button>
						<!--<el-button type="primary"  size="mini" @click="addMethods" style="float:right">添加方法</el-button>-->
					</div>
					<el-table :data="analysisItemTableData" style="width: 100%" size="mini" ref="multipleTable" class="tableCon" @selection-change="handleSelectionChange">
						<el-table-column v-if="noadd||index" type="selection" fixed width="55">
						</el-table-column>
						<el-table-column label="序号" fixed min-width="50px">
							<template slot-scope="scope">
								{{scope.$index+(readQuery.page - 1) * readQuery.pageCount + 1}}
							</template>
						</el-table-column>
						<el-table-column property="name" :show-overflow-tooltip="true" label="名称" min-width="100px">
						</el-table-column>
						<!--<el-table-column
                property="alias"
                label="别名"
                min-width="100px">
              </el-table-column> -->
						<el-table-column property="status" label="状态" min-width="120px" :formatter='formatter'>
						</el-table-column>
						<el-table-column label="操作" min-width="100px" v-if="(isZuJian||!noadd)&&!index && somePageOpera">
							<template slot-scope="scope">
								<el-button v-if="scope.row.status=='1' && userOpernation.disable.display" type="text" size="mini" @click="isStart(scope.row)">停用</el-button>
								<el-button v-if="scope.row.status=='0' && userOpernation.enable.display" type="text" size="mini" @click="isStart(scope.row)">启用</el-button>
								<el-button v-if="!isZuJian && scope.row.status=='2'  && userOpernation.update.display" @click="editAnalysisItem(scope.row)"
								 type="text" size="mini" :disabled="scope.row.source !='' && scope.row.source != undefined ">编辑</el-button>
								<el-button v-if="userOpernation.delete.display" @click.native="deleteAnalysisItem(scope.$index, scope.row)" type="text" size="mini"
								 :disabled="scope.row.source !='' && scope.row.source != undefined ">删除</el-button>
							</template>

						</el-table-column>
					</el-table>
					<div class="block changepages" v-if="!noadd&&!isZuJian">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20,30,40]"
						 :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
						</el-pagination>
					</div>
					<div class="block changepages" v-if="noadd">
						<el-pagination layout="prev, pager, next" :total="50">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="addanalysiShow" width="55%" :show-close='false' :closeOnClickModal='false'>
			<span slot="title" class="dialog-title">
		  	{{newOrEdit=='new'?'新增':'编辑'}}检测项目
			    <el-button @click="resetForm('sisForm')" size="mini" class="popupClose">关闭</el-button>
			  </span>
			<el-form label-width="110px" :inline="false" class="demo-form-inline" :model="sisForm" :rules="rules" ref="sisForm">
				<el-form-item label="名称" prop="name">
					<el-col :span="22">
						<el-input placeholder="检测项目名称" size="mini" v-model="sisForm.name"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="状态" v-if="newOrEdit != 'new'">
					<el-col :span="22">
						<el-select v-model="sisForm.status" placeholder="请选择" style="width: 100%;" size="mini" disabled>
							<el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-col :span="22">
						<el-input placeholder="排序" size="mini" v-model="sisForm.sort"></el-input>
					</el-col>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="submitForm('sisForm')" size="mini"  :disabled = "!isRepeat">确 定</el-button>
			    <el-button  size="mini" @click="resetForm('sisForm')">取 消</el-button>
			  </span>
		</el-dialog>
    <itemChoose :addVisible.sync="itemchooseShow"></itemChoose>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
  const itemChoose = () => import('./children/itemChoose.vue');
	export default {
		data() {
			return {

				readQuery: {
					page: 1, //第几页
					pageCount: 20, //页面得记录条数，
				},
				analysisItemTableData: [],
				enableStatusValue: '',
				searchName: '',
				rowNumber: 0,
				addanalysiShow: false,
				newOrEdit: 'new',
				sisForm: {
					name: '',
					status: 1,
					sort: null,
				},
				rules: {	//表单验证的规则
					name: [
						{ type: 'string', required: true, message: '请填写名称', trigger: 'blur' }
					],
				},
				typeofAbilityTableDateValue: '',
				analysisItemTypeValue: '',
				roundingTypeValue: '',
				currentPage: 1,
				popupShow: false,
				deleteConfirmShow: false,
				isRepeat: true,
				somePageOpera: true,
        itemchooseShow:false,

				canEdit: true,
				retentionNum: 1,
			}
		},
		props: ['isZuJian', 'noadd', 'index', 'notop', 'userOpernation'],
		components: {
      itemChoose
		},
		computed: {
			...mapState(['enableStatus', 'typeofAbilityTableDate', 'analysisItemType', 'roundingType', 'yesorno', 'analysisItemTableDate']),

		},
		mounted() {
			this.readItemList(this.readQuery)
			this.somePageOpera = this.util.operate({ delete: this.userOpernation.delete, update: this.userOpernation.update, disable: this.userOpernation.disable, enable: this.userOpernation.enable })

		},
		methods: {
			formatter(row, column, cellValue, index) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
			},
			emptyList() {
				this.searchName = '';
				this.enableStatusValue = '';
				this.readItemList(this.readQuery, 'search')
			},
			handleCurrentChange: function (val) {
				this.readQuery.page = val;
			},
			handleSizeChange: function (val) {
				this.readQuery.pageCount = val;
			},

			readItemList(parp, search) {

				if (this.isZuJian && !this.noadd) {
					var params = {
						name: this.searchName,
					}
					var url = '/technology/readAllItem.htm'
				} else {
					var url = '/technology/readItemList.htm'
					var params = {
						name: this.searchName,
						status: this.enableStatusValue,
					}
					if (search != undefined) {
						this.readQuery.page = 1;
						params.page = 1;
						params.pageCount = parp.pageCount;
					} else {
						params.page = parp.page;
						params.pageCount = parp.pageCount;
					}
				}
				this.$http({
					method: 'post',
					apiUrl: url,
					params: params,
				}).then(res => {
					if (res.code === 0) {
						this.analysisItemTableData = [];
						if(this.isZuJian && !this.noadd){
							for(var i in res.data){
								if(!res.data[i].disabled){
									this.analysisItemTableData.push(res.data[i])
								}
							}
						}else{
							this.analysisItemTableData = res.data;
						}
						if (!res.pageinfo) {
							this.rowNumber = 0;
						} else if (res.pageinfo && !res.pageinfo.rowNumber) {
							this.rowNumber = 0;
						} else {
							this.rowNumber = res.pageinfo.rowNumber;
						}
					}

				})
			},
			addAnalysisitem() {
				this.sisForm.sort = 9999;
				this.addanalysiShow = true;
				this.newOrEdit = 'new';
			},
			editAnalysisItem: function (row) {
				this.addanalysiShow = true;
				this.newOrEdit = 'edit';
				for (var i in row) {	//赋值
					this.sisForm[i] = row[i]
				}
			},
			submitForm(sisForm) {
				this.$refs[sisForm].validate((valid) => {  //表单验证
					if (valid) {
						if (this.newOrEdit == 'new') {
							var url = '/technology/addItem.htm';
							var data = {
								name: this.sisForm.name,
								status: 1,
								sort: this.sisForm.sort,
							};

						} else {
							var url = '/technology/updateItem.htm';
							var data = {
								id: this.sisForm.id,
								name: this.sisForm.name,
								sort: this.sisForm.sort,
							};
						}
						this.isRepeat = false;
						this.$http({
							method: 'post',
							apiUrl: url,
							params: data,
							isJson: true,
						}).then(res => {
							this.isRepeat = true;
							if (res.code == 0) {
								this.readItemList(this.readQuery)
								this.$message({
									type: 'success',
									message: '提交成功!'
								});
								this.resetForm('sisForm');
							}

						}).catch(() => {

						});

					} else {
						return false;
					}
				});

			},
			resetForm(formName) {	//重置表单,关闭表单

				this.$refs[formName].resetFields();//重置表单
				this.sisForm = {
					name: '',
					status: 1,
					sort: null,
				},
					this.isRepeat = true;
				this.addanalysiShow = false;//关闭表单

			},
      chooseAnalysisitem(){
          this.itemchooseShow = true;
      },


			deleteAnalysisItem(key, row) {
				this.$confirm('是否删除', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var that = this;
					var param = {
						id: row.id,
					}
					this.$http({
						apiUrl: '/technology/deleteItem.htm',
						type: 'post',
						params: param,
					}).then(res => {
						if (res.code === 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.readItemList(this.readQuery)
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleSelectionChange(val) {
				this.$emit("selectedItem", val)
			},
			//启用或者停用方法
			isStart(row) {
				var msg = row.status == 0 ? "启用" : "停用";
				this.$confirm("是否" + msg, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						method: 'post',
						apiUrl: '/technology/updateItem.htm',
						params: {
							id: row.id,
							name:row.name,
							status: row.status == 0 ? 1 : 0,
						},
						isJson: true,
					}).then(res => {
						if (res.code === 0) {
							this.readItemList(this.readQuery)
						}

					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消' + msg
					});
				});
			},
			// 多选取消选择
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
		},
		watch: {
			readQuery: {
				handler(val, oldVal) {
					this.readItemList(this.readQuery)
				},
				deep: true
			},

		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.seachTip .infoitem {
		width: calc(100%/3);
	}

	.seachTip .informationItem {
		width: calc(100% - 80px);
		float: none;
		margin-left: 8px;
	}
</style>
